<script setup lang="ts">
import { reactive } from 'vue'
import Guacamole from 'guacamole-common-js'

const tableData = [
  {
    org: '武汉中北路营业部',
    name: '刘恒泰',
    description: '申请访问使用，10分钟',
  },
  {
    org: '武汉中北路营业部',
    name: '刘恒泰',
    description: '申请访问使用，10分钟',
  },
  {
    org: '武汉中北路营业部',
    name: '刘恒泰',
    description: '申请访问使用，10分钟',
  },
]

const form = reactive({
  account: '',
  password: '1234',
  protocol: 'vnc',
  ip: '10.65.208.228',
  port: '5900',
})
const desktopObj = {
  client: undefined,
  layer: undefined,
  state: 0,
  sink: undefined,
}
const onSubmit = () => {
  console.log(form)
  wsHandshake()
}

const wsHandshake = () => {
  const params =
    'protocol=' +
    form.protocol +
    '&account=' +
    form.account +
    '&password=' +
    form.password +
    '&ip=' +
    form.ip +
    '&port=' +
    form.port +
    '&width=800' +
    '&height=800'
  const websocketPath = `ws://${window.location.hostname}:${window.location.port}/api/vap/session/vnc`
  const tunnel = new Guacamole.WebSocketTunnel(websocketPath)
  console.log(websocketPath, tunnel)
  // 创建桌面客户端
  desktopObj.client = new Guacamole.Client(tunnel)
  // 解析自定义指令，这行代码必须放到  new Guacamole.Client(tunnel) 代码之后
  const _oninstruction = tunnel.oninstruction
  tunnel.oninstruction = (opcode, parameters) => {
    onTunnelInstruction(opcode, parameters)
    if (_oninstruction) {
      _oninstruction(opcode, parameters)
    }
  }

  const display = document.getElementById('display')
  desktopObj.layer = desktopObj.client.getDisplay()
  const element = desktopObj.client.getDisplay().getElement()
  display.appendChild(element)
  desktopObj.client.connect(params)
  // 页面关闭时销毁客户端对象
  window.onunload = function () {
    desktopObj.client.disconnect()
  }

  // mouse
  const mouse = new Guacamole.Mouse(element)
  mouse.onmousedown =
    mouse.onmouseup =
    mouse.onmousemove =
      function (mouseState: any) {
        const ms = new Guacamole.Mouse.State(
          mouseState.x / desktopObj.layer.getScale(),
          mouseState.y / desktopObj.layer.getScale(),
          mouseState.left,
          mouseState.middle,
          mouseState.right,
          mouseState.up,
          mouseState.down,
        )
        desktopObj.client.sendMouseState(ms)
      }
  // sink
  desktopObj.sink = new Guacamole.InputSink()
  display.appendChild(desktopObj.sink.getElement())
  desktopObj.sink.focus()

  // Keyboard
  // const keyboard = new Guacamole.Keyboard(desktopObj.sink.getElement())
  // keyboard.onkeydown = onKeyDown
  // keyboard.onkeyup = onKeyUp
}

const onTunnelInstruction = (opcode: any, parameters: any) => {
  if (opcode == 'disconnect') {
    console.log('连接销毁，画面关闭')
  }
  if (opcode == 'error') {
    console.error('指令', opcode, '参数', parameters)
    desktopObj.client.disconnect()
  }
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-form :model="form" label-width="auto" class="mt-4 ml-2">
          <el-form-item label="协议">
            <el-input v-model="form.protocol" />
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="form.account" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" />
          </el-form-item>
          <el-form-item label="ip">
            <el-input v-model="form.ip" />
          </el-form-item>
          <el-form-item label="端口">
            <el-input v-model="form.port" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">连接</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="org" label="营业部" />
          <el-table-column prop="name" label="用户" />
          <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default>
              <el-button link type="primary" size="small" @click="wsHandshake">连接</el-button>
              <el-button link type="primary" size="small">申请</el-button>
              <el-button link type="primary" size="small">录像</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="18">
        <div style="width: 100%; height: 100vh" id="display"></div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped></style>
